<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { renderStateGauge } from '@/assets/js/chartUtils'
import { getSystemState, checkGPUmem } from '@/assets/api/system'
import { formatStamp } from '@/assets/js/utils'
// import { showLoading } from '@/assets/js/loading'
import lineCharts from '@/components/system/lineCharts.vue'
const cpu = ref({})
const gpu = ref()
const disk = ref({})
const memory = ref({})
const dataXValue = ref([])
const dataYValue = ref([])
const GPUValue = ref([])
const memoryValue = ref([])
function getData() {
    // showLoading()
    getSystemState().then((res) => {
        getGPUmen()
        cpu.value = res.data.cpu
        disk.value = res.data.disk
        memory.value = res.data.men
        renderStateGauge('cpuChart', {
            value: cpu.value.percent,
            max: 100,
            unit: '%',
        })
        renderStateGauge('diskChart', {
            value: disk.value.used,
            max: disk.value.total,
            unit: 'G',
        })
        renderStateGauge('memoryChart', {
            value: memory.value.used,
            max: memory.value.total,
            unit: 'G',
        })
        dataXValue.value.push(formatStamp(+new Date(), 'hh:mm:ss'))
        dataYValue.value.push(res.data.cpu.percent)
        GPUValue.value.push(gpu.value)
        memoryValue.value.push(memory.value.used)
        if (dataXValue.value.length > 8) {
            dataXValue.value.shift()
            dataYValue.value.shift()
            GPUValue.value.shift()
            memoryValue.value.shift()
        }
    })
}
function getGPUmen() {
    checkGPUmem().then((res) => {
        gpu.value = res.data
        renderStateGauge('gpuChart', {
            value: res.data,
            max: 100,
            unit: '%',
        })
    })
}
onMounted(() => {
    getData()
    getGPUmen()
})
const state = reactive({
    timeInter: null, //定义定时器
})
state.timeInter = setInterval(() => {
    getData()
}, 3000)
onUnmounted(() => {
    clearInterval(state.timeInter) //销毁
    state.timeInter = null
})
</script>
<template>
    <div class="white-box d-flex-1">
        <el-row :gutter="30">
            <el-col :sm="12" :md="8" :lg="6">
                <div class="system-state">
                    <h4>CPU利用率</h4>
                    <p class="value">{{ cpu.percent || '--' }}%</p>
                    <div class="chart" id="cpuChart"></div>
                </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6">
                <div class="system-state">
                    <h4>磁盘利用率</h4>
                    <p class="value">{{ disk.used || '--' }}G</p>
                    <p class="total">总磁盘大小 {{ disk.total || '--' }}G</p>
                    <div class="chart" id="diskChart"></div>
                </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6">
                <div class="system-state">
                    <h4>系统内存利用率</h4>
                    <p class="value">{{ memory.used || '--' }}G</p>
                    <p class="total">系统内存 {{ memory.total || '--' }}G</p>
                    <div class="chart" id="memoryChart"></div>
                </div>
            </el-col>
            <!-- <el-col :sm="12" :md="8" :lg="6">
                <div class="system-state">
                    <h4>系统诊断</h4>
                    <div class="mt-30 text-center">
                        <el-button type="primary">网络诊断</el-button>
                        <el-button type="primary">服务诊断</el-button>
                    </div>
                </div>
            </el-col> -->
            <el-col :sm="12" :md="8" :lg="6">
                <div class="system-state">
                    <h4>GPU利用率</h4>
                    <p class="value">{{ gpu || '--' }}%</p>
                    <div class="chart" id="gpuChart"></div>
                </div>
            </el-col>
        </el-row>
        <lineCharts
            :dataYValue="dataYValue"
            :dataXValue="dataXValue"
            :GPUValue="GPUValue"
            :memoryValue="memoryValue"
        ></lineCharts>
    </div>
</template>
<style lang="scss" scoped>
.system-state {
    position: relative;
    height: 160px;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #eee;
    h4 {
        font-size: 18px;
    }
    .value {
        margin: 10px 0;
        font-size: 30px;
        font-weight: bold;
    }
    .total {
        position: relative;
        padding-left: 10px;
        line-height: 30px;
        &:before {
            position: absolute;
            left: 0;
            top: 50%;
            content: '';
            width: 5px;
            height: 16px;
            margin-top: -8px;
            background: $color-danger;
        }
    }
    .chart {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        background: rgba(#000, 0.05);
    }
}
</style>
